<!-- 证书下载 -->
<template>
	<view class="wrap">
		<!-- 证书 -->
		<view class="cateWrap">
			<image :src="imgUrl" mode="widthFix"></image>
		</view>
		<!-- tab -->
		<view class="tabBox" v-show="tabShow">
			<view class="tabItem" :class="{active: index == tabCurr}" v-for="(item,index) in tabText"
				@click="changeTab(index)">
				<text>{{ item }}</text>
			</view>
		</view>
		<!-- 按钮 --><strong></strong>
		<button type="default" class="routerBtn" @click="beginCanvas(imgUrl,'证书')">下载图片</button>
		<!-- toast -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import downloader from '../../components/xfl-img-downloader/img-downloader.js'; //导入
	export default {
		// js
		data() {
			return {
				imgUrl: 'https://tuanwei.yjha.com.cn/resource/certificate_bg.jpg',
				tabCurr: 1,
				tabText: ['证书', '徽章'],
				tabShow: false, //是否显示证书及tab切换
				obj: [],
				wxKey: '',
			}
		},
		onLoad(option) {
			// 禁用分享
			wx.hideShareMenu()
			this.wxKey = option.wxKey
			console.log(option)
			uni.request({
				url: this.baseUrl + '/api/getCertificate',
				method: 'GET',
				data: {
					blWxkey: this.wxKey
				},
				header: {
					Authorization: uni.getStorageSync('token')
				},
				success: res => {
					console.log(res)
					this.obj = res.data.data.pass;
					console.log(this.obj)
					this.tabShow = this.obj.blIsCertificate; //判断是否显示证书
					this.imgUrl = this.obj.blBadge; //徽章图片
				},
			});
		},
		methods: {
			// 下载图片
			beginCanvas(url, imgName) {
				let self = this;
				uni.authorize({
					/* 这个就是保存相册的 */
					scope: 'scope.writePhotosAlbum',
					success() {
						/* 保存图片方法 */
						self.img();
					},
					complete(res) {
						console.log(res);
						/* 这里判断一下如果没有授权重新打开设置选项 */
						uni.getSetting({
							success(res) {
								if (!res.authSetting['scope.writePhotosAlbum']) {
									/* 打开设置的方法 */
									self.opensit();
								}
							}
						});
					}
				});
			},
			/* 授权提示 ，这里就是重复提示用户去授权*/
			opensit() {
				uni.showModal({
					content: '由于您拒绝授权,无法进行图片保存，点击确定进行授权',
					success: function(res) {
						if (res.confirm) {
							/* 这个就是打开设置的API*/
							uni.openSetting({
								success(res) {
									console.log(res.authSetting);
								}
							});
						} else if (res.cancel) {
							uni.showModal({
								cancelText: '拒绝授权',
								confirmText: '重新授权',
								content: '由于您拒绝了授权，无法保存图片到相册',
								success: function(res) {
									if (res.confirm) {
										uni.openSetting({
											success(res) {
												console.log(res.authSetting);
											}
										});
									} else if (res.cancel) {
										console.log('用户不授权');
									}
								}
							});
						}
					}
				});
			},
			/* 特别注意要先获取图片信息在进行保存，不让保存不了 */
			img() {
				let that = this;
				/* 获取图片信息 */
				uni.getImageInfo({
					src: that.imgUrl,
					success: function(image) {
						console.log(image);
						/* 保存图片到相册 */
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: function() {
								console.log('save success');
								that.showToast('图片保存成功，请在相册进行查看', 'success')
								console.log('1111')
							},
							complete(res) {
								console.log(res);
							}
						});
					}
				});
			},
			// this.showToast('您已拒绝授权，请打开小程序右上角设置手动开启图片存储权限', 'default', '', 4000)
			// 弹出提示
			// 弹出提示
			showToast(title, type, url) {
				this.$refs.uToast.show({
					title: title,
					type: type,
					url: url
				})
			},
			// 切换显示徽章或证书
			changeTab(index) {
				console.log(index)
				this.tabCurr = index;
				// 证书
				if (this.tabCurr == 0) {
					this.imgUrl = this.obj.blCertificatePath;
				} else {
					this.imgUrl = this.obj.blBadge;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		width: 100%;
		min-height: 100vh;
		height: auto;
		overflow: hidden;
		background: url('https://tuanwei.yjha.com.cn/resource/realName_bg.png') no-repeat;
		background-size: 100% 100%;
		padding-top: 0px;
		box-sizing: border-box;

		.cateWrap {
			width: 100%;
			height: auto;
			overflow: hidden;
			box-sizing: border-box;
			text-align: center;

			image {
				display: block;
				width: 100%;
			}

			@media screen and (max-width:374px) {
				margin-bottom: 20px;
			}
		}

		.tabBox {
			position: fixed;
			right: 0;
			top: 40%;
			z-index: 999;

			.tabItem {
				width: 50px;
				height: 30px;
				margin-bottom: 5px;
				background-color: #ff9472;
				border-top-left-radius: 15px;
				border-bottom-left-radius: 15px;
				padding: 0 5px;

				text {
					display: block;
					font-size: 14px;
					color: #fff;
					line-height: 30px;
					text-align: center;
				}
			}

			.active {
				background-color: #ff5722;

				text {
					color: #fff;
					font-weight: bold;
				}
			}
		}

		.routerBtn {
			position: fixed;
			left: 10%;
			bottom: 30px;
			display: block;
			width: 80%;
			height: 42px;
			line-height: 42px;
			color: #8d4f0d;
			font-family: '黑体';
			background: url('https://tuanwei.yjha.com.cn/resource/ligthBtn_bg.png') no-repeat;
			background-size: 100% 100%;

			&::after {
				border: none;
			}
		}
	}
</style>
